<template>
  <NuxtLink
    class="product-poster--small rounded-2xl relative group flex text-center lg:flex flex-col overflow-hidden justify-between item-border pb-1 lg:pb-3 px-1 lg:min-h-[220px]"
    external
    :to="$localePath(`/game${dataInfo.urlName}`)">
    <!-- 信息 -->
    <!-- 图片 -->
    <YImage
      :alt="dataInfo.title"
      lazy
      class="absolute w-full h-full inset-0 blur-2xl"
      :src="dataInfo.imageUrl"
      width="86"
      height="113" />
    <YImage
      :alt="dataInfo.title"
      lazy
      class="trans relative mb-2 mt-4 object-cover w-[100px] lg:w-[150px] lg:h-[150px] h-[100px] mx-auto rounded-xl"
      :src="dataInfo.imageUrl"
      width="100"
      height="100" />
    <!-- title -->
    <h3 class="text-xs relative lg:px-1 lg:text-base font-semibold text-white my-2 line-clamp-2">
      {{ dataInfo.title }}
    </h3>
    <!-- 地区 -->
    <div class="min-h-8 lg:min-h-0 relative lg:text-xs text-xs text-white px-1 rounded-sm">
      <span>{{ dataInfo.language }}</span>
      <span class="mx-2 text-white">/</span>
      <span>{{ dataInfo.region }}</span>
    </div>
  </NuxtLink>
</template>

<script lang="ts" setup>
import YImage from '~/components/logic/YImage.vue'

const props = defineProps(['dataInfo', 'isShowBg'])
</script>

<style scoped lang="scss">
.item-border {
  border: 1px solid hsla(0, 0%, 100%, 0.12);
  background-color: #31383c;
  border-radius: 8px;
}

.scroll::-webkit-scrollbar {
  display: none;
}

.dataInfo-border {
  border: 1px solid hsla(0, 0%, 100%, 0.12);
  background-color: #31383c;
  border-radius: 8px;
}

@keyframes scale-big {
  to {
    transform: scale3d(1.05, 1.05, 1.05);
  }
}

.trans {
  &:hover {
    animation: scale-big 0.3s forwards;
  }
}
</style>
